<template>
    <div :style="{backgroundImage:c}" class="content">
        <div class="status-bar" :style="{height:statusBarHeight + 'px'}"></div>
        <div class="title_content">
            <div class="title_log">
                <image :src="mch.logo" style="width:56px;height:56px"></image>
            </div>
            <text class="page_header_title">{{mch.name}}</text>
        </div>
        <div class="search_input_content" @click="searchClick">
            <div class="icon_search">
               <!-- -->
				<text class="icon">&#xe62f;</text>
            </div>
            <text style="font-size: 26px;line-height: 56px;color: rgba(42, 42, 54,0.3);">请输入商品名</text>
        </div>
        <div class="app">
            <slider class="banner" interval="3000" auto-play="true" show-indicators="true" @change="changeColor">
                <div class="banner-frame" v-for="img in photoList">
                    <image class="banner-image"   :src="img.thumbnail" @click="toLink(img)"></image>
                </div>
            </slider>
        </div>
    </div>
</template>
<script>
    const eeui = app.requireModule('eeui');
    import {
        getInfo
    } from '../../../../api/mch.js'
    import {
        list
    } from '../../../../api/ad.js'
    export default {
        name: 'swipers',
        data() {
            return {
                box: 'red',
                mch: {
                    logo: '',
                    name: ''
                },
                tagIds: [],
                background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
                photoList: [],
                color: [],
                c: '',
                imageList: [{
                    src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'
                },
                    {
                        src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'
                    },
                    {
                        src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'
                    }
                ],
                statusBarHeight: eeui.getStatusBarHeightPx(),
            }
        },
        props: [
            'content'
        ],
        created() { // 在实例创建完成后被立即调用
            this.loadAd()
			this.initIconFont()
            this.loadInfo()
        },
        methods: {
            changeColor(e) {
                this.c = this.color[e.index]
            },
            searchClick() {
                const eeui = app.requireModule('eeui');
                eeui.openPage({
                        url: 'root://pages/goods/search/index.js',
                        statusBarType: 'immersion',
                        statusBarStyle:false
                    },
                    (result) => {

                    }
                );
            },
            loadInfo() {
                getInfo(this.getGlobalData().mchId).then(res => {
                    this.mch = res.data;

                });
            },

            loadAd() {
                var _this = this
              console.warn("11111111111111111111111111")
              console.warn(this.content)
              console.warn("222222222222222222222222222")
              if (this.content.tagids != null) {
                    this.tagIds = this.content.tagids.split(',');
                    for (var i = 0; i < _this.tagIds.length; i++) {
                        _this.tagIds[i] = parseInt(_this.tagIds[i])
                    }
                }
                list({
                    mchId: this.getGlobalData().mchId,
                    tagIds: this.tagIds
                }).then(res => {
                    res.data.data.forEach(element => {
                        element.backgroundColor = "linear-gradient(to bottom, " + element.backgroundColor +
                            ',rgb(248,248,248))'
                        _this.color.push(element.backgroundColor)
                        element.thumbnail = this.thumbnail(element.thumbnail, 710, 350)
                      this.c = this.color[0]
                    });
                    _this.photoList = res.data.data

                });
            },
            toLink(e) {
                console.info("轮播图点击事件")
                console.info(e)
                // if (e.currentTarget.dataset.type.hasOwnProperty('typeId') && !util.isNull(e.currentTarget.dataset.type.typeId)) {}
                if (e.hasOwnProperty('typeId') && !this.isNull(e.typeId)) {
                if (e.type === 0) {

                        eeui.openPage({
                            url: 'root://pages/goods/product/details.js',
                            params: e.typeId,
                            statusBarType: 'immersion',
                            statusBarStyle:false
                        })

                } else if (e.type === 9) {
                    eeui.openPage({
                        url: 'root://pages/index/wxPage/wxPage.js',
                        params: e.typeId,
                        statusBarType: 'immersion',
                        statusBarStyle:false
                    })

                } else if(e.type === 1){
                    eeui.openPage({
                        url: 'root://pages/goods/category/category.js',
                        params: e.typeId,
                        statusBarType: 'immersion',
                        statusBarStyle:false
                    })

                } else if(e.type === 2){
                    eeui.openPage({
                        url: 'root://pages/member/detail/article.js',
                        params: e.typeId,
                        statusBarType: 'immersion',
                        statusBarStyle:false
                    })

                }else if (e.type === 12) {
                    if (e.path) {
                        eeui.openPage({
                            pageType: 'web',
                            url: e.path,
                            statusBarType: 'immersion',
                            statusBarStyle:false
                        })
                    }
                }
                }
            },
            itemClick(res) {
                eeui.toast("点击项" + res)

            }
        },
        components: {},
    }
</script>

<style scoped>
    .content {
        width: 750px;
    }

    .app {
        width: 750px;
    }

    .title_content {
        height: 100px;
        display: flex;
        align-items: center;
        flex-direction: row;
        padding-left: 20px;
    }

    .search_input_content {
        width: 710px;
        height: 58px;
        /* border: 1px solid rgba(212, 215, 220, 1); */
        opacity: 0.95;
        border-radius: 50px;
        display: flex;
        margin-left: 20px;
        flex-direction: row;
        align-items: center;
        background-color: white;
        overflow: hidden;
        margin-top: 6px;
        margin-bottom: 20px;
    }

    .icon_search {
        margin-left: 20px;
    }

    .title_log {
        width: 56px;
        height: 56px;
        border-radius: 500px;
        overflow: hidden;
    }

    .banner {
        display: flex;
        padding-right: 20px;
        width: 750px;
        border-radius: 16px;
        /*height: 350px;*/
      height: 300px;
    }

    .banner-frame {
        width: 710px;
        height: 10px;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 16px;
        position: relative;
    }

    .icon {
		font-family: iconfont2;
		/*margin-top: 20px;*/
        color: rgba(42, 42, 54,1);
        opacity: 0.3;
        font-size: 26px;
        margin-right: 10px;
    }

    .banner-image {
        width: 710px;
        /*height: 350px;*/
      height: 300px;
      border-radius: 16px;
    }

    .page_header_title {
        font-size: 32px;
        margin-left: 10px;
        color: white;
        font-weight: 700;
    }
</style>
